<template>
	<view>
		<free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar>
		<view class="position-relative" style="height: 620rpx;">
			<image :src="imgUrl +'/images/bg.jpg'" mode="aspectFill" style="height: 590rpx;" class="bg-secondary w-100">
			</image>
			<image :src="avatar" class="bg-secondary rounded position-absolute bottom-0 image-style "></image>
			<text class="text-white font-md position-absolute" style="bottom: 45rpx;right: 160rpx;">{{nickname}}</text>
		</view>
		<!-- 朋友圈列表 -->
		<free-moment-list v-for="(item,index) in list" :key="index" :item="item" :index="index" @action="doAction"
			@reply="replyEvent"></free-moment-list>

		<!-- 评论框 -->
		<free-popup ref="action" bottom transformOrigin="center bottom">
			<view style="height: 105rpx;" class="bg-light border-top flex align-center px-3 my-2">
				<textarea fixed class="bg-white rounded p-2 font-md" style="height: 80rpx;width: 480rpx;" :focus="true"
					v-model="content" />
				<free-icon-button :icon="'\ue612'" @click="changeFaceModal"></free-icon-button>
				<view class="mx-2" @click="send">
					发送
				</view>
				<!-- <free-main-button style="margin-left: 10rpx;" name="发送" :disabled="content.length === 0" @click="send"></free-main-button> -->
			</view>
			<scroll-view v-if="faceModal" scroll-y="true" style="height: 350rpx;" class="bg-light">
				<view class="flex flex-wrap">
					<view style="width: 107rpx;height: 107rpx;" class="flex align-center justify-center"
						hover-class="bg-white" v-for="(item,index) in faceList" :key="index" @click="addFace(item)">
						<text>{{item}}</text>
					</view>
				</view>
			</scroll-view>
		</free-popup>
		<!-- 上拉加载 -->
		<view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10">
			<text class="text-muted font">{{loadmore}}</text>
		</view>
		<!-- 空内容提示 -->
		<u-empty v-if="list.length==0"  mode="favor" text="暂无动态" font-size="32" iconSize="150" marginTop="250"></u-empty>
		<!-- tabbar -->
		<!-- <q-tabbar v-if="showstatus" :active="0" :count="msgCount"></q-tabbar> -->
		<!-- 返回顶部 -->
		<!-- <q-back-top></q-back-top> -->
	</view>
</template>

<script>
	import freeTransparentBar from '@/components/free-ui/free-transparent-bar.vue';
	import freeMomentList from '@/components/free-ui/free-moment-list.vue';
	import freePopup from '@/components/free-ui/free-popup.vue';
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	import auth from '@/components/mixin/auth.js';
	import { checkLogin } from '@/utils/wxConfig.js'
	import {
		mapState
	} from 'vuex'
	import $Q from '@/common/free-lib/qrcode.js';
	export default {
		mixins: [auth],
		components: {
			freeTransparentBar,
			freeMomentList,
			freeIconButton,
			freeMainButton,
			freePopup
		},
		data() {
			return {
				imgUrl: this.$site.img_url,
				content: "",
				list: [],
				showstatus: true,
				faceModal: false,
				faceList: ["😀", "😁", "😂", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😎", "😍", "😘", "😗", "😙", "😚",
					"😇", "😐", "😑", "😶", "😏", "😣", "😥", "😮", "😯", "😪", "😫", "😴", "😌", "😛", "😜", "😝",
					"😒", "😓", "😔", "😕", "😲", "😷", "😖", "😞", "😟", "😤", "😢", "😭", "😦", "😧", "😨", "😬",
					"😰", "😱", "😳", "😵", "😡", "😠"
				],
				// 评论的对象
				commentIndex: -1,

				page: 1,
				loadmore: "上拉加载更多",
				key: "moment_timeline",
				reply_user: false,
				params: false,
				scrollTop: 0
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		computed: {
			...mapState({
				user: state => state.user.user
			}),
			nickname() {
				if (!this.params) {
					return this.user.nickname || this.user.username
				}
				return this.params.name
			},
			avatar() {
				let avatar = ''
				avatar = !this.params ? this.user.avatar : this.params.avatar
				return avatar || 'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/images/userpic.png'
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.$C.miniappName,
				path: '/pages/index/index',
				imageUrl: this.shareCover
			};
		},
		async onShow() {
			if (!checkLogin()) return
			await this.getData()
		},
		onLoad(e) {
			if (!checkLogin()) return
			if (e.key) {
				this.key = e.key
			}
			if (e.params) {
				this.params = JSON.parse(decodeURIComponent(e.params))
				console.log(this.params);
			}
			this.page = 1
			this.getData()
			uni.$on('momentNotice', this.momentNotice)
		},
		onReachBottom() {
			if (this.loadmore !== '上拉加载更多') {
				return
			}
			this.page += 1
			this.loadmore = '加载中...'
			this.getData().catch(err => {
				this.page -= 1
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
				this.loadmore = '上拉加载更多'
			})
		},
		onPullDownRefresh() {
			this.page = 1
			this.getData().then(res => {
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				});
				uni.stopPullDownRefresh()
			}).catch(err => {
				uni.showToast({
					title: '刷新失败',
					icon: 'none'
				});
				uni.stopPullDownRefresh()
			})
		},
		destroyed() {
			uni.$off('momentNotice', this.momentNotice)
		},
		methods: {
			async momentNotice() {
				this.page = 1
				let res = await this.getData()
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				});

				//  this.getData().then(res=>{
				// 	uni.showToast({
				// 		title: '刷新成功',
				// 		icon: 'none'
				// 	});
				// })
			},
			async getData() {
				let page = this.page
				let param = ''
				if (this.params && this.key == 'moment') {
					param = '?user_id=' + this.params.id
				}
				let res = await this.$C.get(`/${this.key}/${this.page}${param}`)
				this.list = page === 1 ? res : [...this.list, ...res]
				this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了'
				// return new Promise((result,reject)=>{
				// 	let page = this.page
				// 	let param = ''
				// 	if(this.params && this.key == 'moment'){
				// 		param = '?user_id='+this.params.id
				// 	}
				// 	this.$C.get(`/${this.key}/${this.page}${param}`).then(res=>{
				// 		this.list = page === 1 ? res : [...this.list,...res]
				// 		this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了'
				// 		result(res)
				// 	}).catch(err=>{
				// 		reject(err)
				// 	})
				// })
			},

			// 点击操作菜单
			doAction(e) {
				uni.showActionSheet({
					itemList: ['点赞', '评论'],
					success: res => {
						if (res.tapIndex === 0) {
							this.doSupport(e)
						} else {
							this.content = ''
							this.faceModal = false
							this.commentIndex = e.index
							this.reply_user = false
							this.$refs.action.show()
							this.showstatus = false
						}
					},
				});
			},
			// 点赞
			doSupport(e) {
				console.log(e);
				this.$C.post('/moment/like', {
					id: e.item.moment_id
				}).then(res => {
					let i = e.item.likes.findIndex(item => item.id === this.user.id)
					if (i !== -1) { // 取消点赞
						e.item.likes.splice(i, 1)
					} else { // 点赞
						e.item.likes.push({
							id: this.user.id,
							name: this.user.nickname || this.user.username
						})
					}
					uni.showToast({
						title: i !== -1 ? '取消点赞成功' : '点赞成功',
						icon: 'none'
					});
					this.getData()
				})
			},
			// 添加表情
			addFace(item) {
				this.content += item
			},
			// 开启/关闭表情包面板
			changeFaceModal() {
				uni.hideKeyboard()
				setTimeout(() => {
					this.faceModal = !this.faceModal
				}, 100)
			},
			// 发送
			send() {
				let item = this.list[this.commentIndex]
				this.$C.post('/moment/comment', {
					id: item.moment_id,
					content: this.content,
					reply_id: this.reply_user ? this.reply_user.id : 0
				}).then(res => {
					item.comments.push({
						content: this.content,
						user: {
							id: this.user.id,
							name: this.user.nickname || this.user.username
						},
						reply: this.reply ? this.reply : null
					})
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					});
				})
				this.$refs.action.hide()
			},
			// 选择发表朋友圈类型
			clickRight() {
				let list = [{
					name: "图文",
					key: "image"
				}, {
					name: "短视频",
					key: "video"
				}, {
					name: "文字",
					key: "content"
				}]
				uni.showActionSheet({
					itemList: list.map(v => v.name),
					success: res => {
						if (!checkLogin()) return
						uni.navigateTo({
							url: 'add-moment?type=' + list[res.tapIndex].key
						});
					},
				});
			},
			replyEvent(e) {
				this.content = ''
				this.faceModal = false
				this.commentIndex = e.index
				this.reply_user = e.reply
				this.$refs.action.show()
			},

		}
	};
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.image-style {
		width: 120rpx;
		height: 120rpx;
		right: 30rpx;
		border-radius: 50%;
	}

	.swiper-body {
		height: calc(100vh - var(--status-bar-height) - 43px);
	}

	.body-scroll-view {
		width: 100%;
		height: 100%;
	}

	.tab-box {
		width: 80%;
	}

	.block-title {
		font-weight: bold;
		padding: 20rpx;
		color: #616161;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;

		.right {
			margin-left: auto;
			color: #999;
			font-size: 24rpx;
		}
	}

	// 顶部圈子
	.topic-wrap {
		padding: 0 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.grid-topic {
		position: relative;
		margin-bottom: 20rpx;

		.name {
			font-size: 24rpx;
			text-align: center;
		}

		.user {
			position: absolute;
			left: 0;
			top: 0;
			font-size: 20rpx;
			display: block;
			background-color: $themes-color;
			padding: 5rpx;
			border-radius: 0 0 10rpx 0;
		}
	}
</style>
